<!DOCTYPE html>
<html>
<head>
    <style>
        .container { padding: 20px; max-width: 1000px; margin: auto; }
        .array-container { display: flex; gap: 5px; margin: 20px 0; }
        .array-item {
            width: 60px;
            height: 60px;
            border: 2px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            transition: all 0.3s;
        }
        .current { background: #4CAF50; color: white; }
        .in-subarray { border-color: #2196F3; background: #e3f2fd; }
        .controls { margin: 20px 0; }
        .step-table { margin-top: 20px; width: 100%; border-collapse: collapse; }
        .step-table th, .step-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }
        .highlight { background-color: #fff9c4; }
    </style>
</head>
<body>
    <div class="container">
        <div class="controls">
            <button onclick="toggleAnimation()">▶️ 播放/暂停</button>
            <button onclick="resetAnimation()">⏹️ 重置</button>
            速度: <input type="range" id="speed" min="100" max="1000" value="500" 
                   oninput="updateSpeed(this.value)">
        </div>
        
        <div id="array-visual" class="array-container"></div>
        
        <div class="status">
            <h4>当前状态：</h4>
            <p>当前元素值: <span id="current-val">-</span></p>
            <p>当前子数组和: <span id="current-sum">-</span></p>
            <p>全局最大和: <span id="global-sum">-</span></p>
        </div>

        <table class="step-table">
            <thead>
                <tr>
                    <th>步骤</th>
                    <th>当前元素</th>
                    <th>current_max</th>
                    <th>global_max</th>
                    <th>子数组范围</th>
                </tr>
            </thead>
            <tbody id="step-log"></tbody>
        </table>
    </div>

<script>
const nums = [-2, 1, -3, 4, -1, 2, 1, -5, 4];
let currentStep = 0;
let animationId = null;
let speed = 200;
let states = [];

function createState(index, currentMax, globalMax, subarray) {
    return {
        index,
        value: nums[index],
        currentMax,
        globalMax,
        subarray
    };
}

function initStates() {
    let current_max = global_max = nums[0];
    let subarray = [0];
    states.push(createState(0, current_max, global_max, subarray));

    for(let i=1; i<nums.length; i++) {
        const prev = states[i-1];
        const newSum = Math.max(nums[i], prev.currentMax + nums[i]);
        current_max = newSum;
        global_max = Math.max(prev.globalMax, newSum);
        
        subarray = (newSum === nums[i]) ? [i] : [...prev.subarray, i];
        states.push(createState(i, current_max, global_max, subarray));
    }
}

function renderArray(step) {
    const container = document.getElementById('array-visual');
    container.innerHTML = '';
    
    nums.forEach((num, index) => {
        const elem = document.createElement('div');
        elem.className = 'array-item';
        elem.textContent = num;
        
        if (index === step) elem.classList.add('current');
        if (states[step].subarray.includes(index)) elem.classList.add('in-subarray');
        
        container.appendChild(elem);
    });

    // 更新状态显示
    document.getElementById('current-val').textContent = states[step].value;
    document.getElementById('current-sum').textContent = states[step].currentMax;
    document.getElementById('global-sum').textContent = states[step].globalMax;

    // 更新步骤表格
    const tbody = document.getElementById('step-log');
    tbody.innerHTML = '';
    states.slice(0, step+1).forEach((state, idx) => {
        const row = document.createElement('tr');
        if(idx === step) row.classList.add('highlight');
        
        row.innerHTML = `
            <td>${idx}</td>
            <td>${state.value}</td>
            <td>${state.currentMax}</td>
            <td>${state.globalMax}</td>
            <td>[${state.subarray.map(i => nums[i]).join(', ')}]</td>
        `;
        tbody.appendChild(row);
    });
}

// 动画控制函数（保持与之前相同）
function animate() {
    if(currentStep < states.length-1) {
        currentStep++;
        renderArray(currentStep);
        animationId = setTimeout(animate, speed);
    }
}

function toggleAnimation() {
    if(animationId) {
        clearTimeout(animationId);
        animationId = null;
    } else {
        animate();
    }
}

function resetAnimation() {
    clearTimeout(animationId);
    animationId = null;
    currentStep = 0;
    renderArray(0);
}

function updateSpeed(newSpeed) {
    speed = 1000 - newSpeed + 50;
}



// 初始化
initStates();
renderArray(0);
</script>
</body>
</html>
